<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 浅拷贝就是拷贝一层，深层次的引用地址则共享内存地址，值改变了也一起跟着改变
        /**
         *  Object.assign()
         * ...扩展运算符
         * Array.prototype.slice() 或者 Array.prototype.slice(0)
         * Array.prototype.concat()
         * **/ 

        const fxArr=["One2","Two2","Three2"]
        const fxArrs=fxArr.slice(0) //["One","Two","Three"]
        const fxArrs2=fxArr.slice() //["One","Two","Three"]
        console.log('fxArrs',fxArrs)
        console.log('fxArrs2',fxArrs2)
        fxArrs[1]="love";
        console.log(fxArr)// ["One", "Two", "Three"]
        console.log(fxArrs)// ["One", "love", "Three"]


        const arr1 = ['111','222','333']
        const fxArr1 = arr1.concat()
        console.log('fxArr1',fxArr1)


        // 深拷贝---开辟一个新的栈，两个对象属性相同，但是地址不一样，一个改变不会改变另外一个

        /**
         * lodash的 _.cloneDeep()
         * JSON.parse(JSON.stringify()) // 弊端会忽略 undefined,函数，symbol
         * 手写函数
         * **/ 

        const deepClone = data =>{
        if(data === null || data === undefined){
            return data
        }
        const type = data.prototype ? data.prototype.toString() : data.toString();
            if(type === '[object File]'){ // 拷贝文件
                const _file = new File([date],data.name,{type: data.type})
                _file.uid = data.uid;
                return _file
            }else if(data instanceof Array){ // 拷贝数组
                const _arr = [];
                for(let i = 0, j = data.length; i < j;i++){
                    _arr.push(deepClone(data[i]))
                }
                return _arr
            }else if(data instanceof Object){// 拷贝对象
                const _obj = {},
                keys = Object.keys(data)
                for(let i = 0, j = keys.length; i < j; i++){
                    _obj[keys[i]] = deepClone(data[keys[i]])
                }
                return _obj
            }else { // 基础类型
                return data
            }
        }

    </script>
</body>
</html>